<template>
  <div class="container">
    <div class="top">
      <el-input
        style="width: 250px; margin-bottom: 5px"
        v-model="search.key"
        placeholder="请输入code、条码 、名称"
        clearable
      ></el-input>
      <el-select
        :multiple="false"
        filterable
        remote
        center
        reserve-keyword
        v-model="search.dccode"
        placeholder="请搜索选择配送中心"
        :remote-method="selectListsRemoteMethods"
        :loading="selectLists.loading"
      >
        <el-option
          v-for="item in selectLists.option"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
      <el-date-picker
        value-format="yyyy-MM-dd"
        v-model="date"
        type="daterange"
        :clearable="false"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
      ></el-date-picker>

      <el-button
        size="small"
        type="primary"
        class="handleSearch"
        icon="el-icon-search"
        @click="handleSearch()"
        >查询</el-button
      >
      <el-button
        size="small"
        type="danger"
        class="handleSearch"
        icon="el-icon-delete"
        @click="empty()"
        >清空</el-button
      >
      <el-button
        size="small"
        type="primary"
        @click="add"
        icon="el-icon-circle-plus"
        >添加加工商品</el-button
      >
      <el-button
        size="small"
        type="primary"
        @click="newAdd"
        icon="el-icon-circle-plus"
        >自选批次加工</el-button
      >
    </div>
    <el-table
      max-height="600"
      :data="tableData"
      border
      style="width: 100%"
      empty-text="暂无数据"
    >
      <el-table-column
        prop="goods_name"
        label="成品名称"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="erp_goods_code"
        label="成品code"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="goods_bar_code"
        label="成品条码"
        align="center"
      ></el-table-column>

      <el-table-column
        prop="num"
        label="加工数量"
        align="center"
      ></el-table-column>

      <el-table-column
        prop="price"
        label="成品入库价格"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="unit"
        label="单位"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="created_at"
        label="加工时间"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="dcname"
        label="配送中心名称"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="whsename"
        label="仓库名称"
        align="center"
      ></el-table-column>
      <!-- <el-table-column
        prop="spec"
        label="规格"
        align="center"
      ></el-table-column> -->
      <el-table-column label="操作" width="100" align="center">
        <template slot-scope="scope">
          <el-button
            type="info"
            size="mini"
            icon="el-icon-info"
            @click="details(scope)"
            >详情</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      width="250px"
      title="配送中心"
      :visible.sync="dialog.centerDialogVisible"
      @close="close"
      center
    >
      <el-select
        :multiple="false"
        filterable
        remote
        center
        reserve-keyword
        v-model="addDialog.dccode"
        placeholder="请搜索选择配送中心"
        :remote-method="selectListsRemoteMethod"
        :loading="selectList.loading"
      >
        <el-option
          v-for="item in selectList.option"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="confirm">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 分页 -->
    <pagination
      @page="handleSizeChange"
      @pagesize="handleCurrentChange"
      :pageData="pageData"
    ></pagination>
    <particularsDialog :dialog="detailsDialog"></particularsDialog>
    <addProcessDialog @upData="getData" :dialog="addDialog"></addProcessDialog>
    <newAddProcessDialog
      @upData="getData"
      :dialog="newAddDialog"
    ></newAddProcessDialog>
  </div>
</template>
<script>
import { parseTime } from "@/utils/index";
import Pagination from "@/components/pagination";
import { productList } from "@/api/process/processList";
import { selectRdcData } from "@/api/select/select";
import ParticularsDialog from "@/components/process/particularsDialog";
import AddProcessDialog from "@/components/process/addProcessDialog";
import NewAddProcessDialog from "@/components/process/newAddProcessDialog";
export default {
  components: {
    pagination: Pagination,
    particularsDialog: ParticularsDialog,
    addProcessDialog: AddProcessDialog,
    newAddProcessDialog: NewAddProcessDialog
  },
  data() {
    return {
      //页面数据
      tableData: [],
      //分页
      pageData: {
        pageSizes: [10, 20],
        pageSize: 10,
        page: 1,
        total: null,
        layout: "total, sizes, prev, pager, next, jumper"
      },
      selectLists: {
        innerVisible: false,
        option: [],
        value: "",
        list: [],
        loading: false
      },
      selectList: {
        innerVisible: false,
        option: [],
        value: "",
        list: [],
        loading: false
      },
      date: [],
      search: {
        key: "",
        dccode: "",
        create_date: "",
        end_date: ""
      },
      addDialog: {
        centerDialogVisible: false,
        dccode: ""
      },
      newAddDialog: {
        centerDialogVisible: false,
        dccode: ""
      },
      dialog: {
        centerDialogVisible: false,
        type: 1
      },
      detailsDialog: {
        centerDialogVisible: false,
        tableData: []
      }
    };
  },

  created() {
    //页面数据
    this.getData();
    this.getselsetDatas();
  },
  methods: {
    //页面数据
    getData() {
      let data = {
        limit: this.pageData.pageSize,
        page: this.pageData.page,
        key: this.search.key,
        dccode: this.search.dccode,
        create_date: this.search.create_date,
        end_date: this.search.end_date
      };
      productList(data)
        .then(res => {
          if (res.code == 0) {
            this.tableData = res.data.list.data;
            this.pageData.page = res.data.list.current_page;
            this.pageData.pagesize = res.data.list.per_page;
            this.pageData.total = res.data.list.total;
          }
        })
        .catch(err => {
          console.log(err);
        });
      this.dialog.centerDialogVisible = false;
      this.addDialog.dccode = "";
    },
    getselsetDatas(query = "") {
      let data = {
        page: 1,
        limit: 500,
        code_or_name: query
      };
      //获取配送中心
      selectRdcData(data).then(res => {
        if (res.data.paginate.data) {
          this.selectLists.option = res.data.paginate.data.map(item => {
            return {
              value: `${item.d_code}`,
              label: `${item.d_name}`
            };
          });
        }
      });
    },
    getselsetData(query = "") {
      let data = {
        page: 1,
        limit: 500,
        code_or_name: query
      };
      //获取配送中心
      selectRdcData(data).then(res => {
        if (res.data.paginate.data) {
          this.selectList.option = res.data.paginate.data.map(item => {
            return {
              value: `${item.d_code}`,
              label: `${item.d_name}`
            };
          });
        }
      });
    },
    // 嵌套搜索配送方式数据
    selectListsRemoteMethods(query) {
      if (query !== "") {
        this.getselsetDatas(query);
      } else {
        this.selectLists.option = [];
      }
    },
    // 嵌套搜索配送方式数据
    selectListsRemoteMethod(query) {
      if (query !== "") {
        this.getselsetData(query);
      } else {
        this.selectLists.option = [];
      }
    },

    // 本地搜索
    handleSearch() {
      this.pageData.page = 1;
      this.pageData.total = null;
      if (this.date.length > 0) {
        this.search.create_date = this.date[0];
        this.search.end_date = this.date[1];
      }
      this.getData();
    },
    //搜索清除
    empty() {
      this.search = {
        key: "",
        dccode: "",
        create_date: "",
        end_date: ""
      };
      this.date = [];
      this.selectLists = {
        innerVisible: false,
        option: [],
        value: "",
        list: [],
        loading: false
      };
    },
    // 添加配送中心
    add() {
      this.dialog.centerDialogVisible = true;
      this.dialog.type = 1;
      this.getselsetData();
    },
    newAdd() {
      this.dialog.centerDialogVisible = true;
      this.dialog.type = 2;
      this.getselsetData();
    },
    //关闭
    close() {
      this.selectList = {
        innerVisible: false,
        option: [],
        value: "",
        list: [],
        loading: false
      };
      this.addDialog.dccode = "";
    },
    //确定
    confirm() {
      this.selectList = {
        innerVisible: false,
        option: [],
        value: "",
        list: [],
        loading: false
      };
      if (this.dialog.type == 1) {
        this.addDialog.centerDialogVisible = true;
      } else if (this.dialog.type == 2) {
        this.newAddDialog.dccode = this.addDialog.dccode;
        this.newAddDialog.centerDialogVisible = true;
      } else {
        this.$message({
          type: "info",
          message: "页面已更新，请刷新当前页面"
        });
      }
      //   this.dialog.centerDialogVisible = false;
    },
    //详情
    details(scope) {
      this.detailsDialog = {
        centerDialogVisible: true,
        tableData: scope.row.material
      };
    },
    //每页多少条
    handleCurrentChange(val) {
      this.pageData.page = 1;
      this.pageData.pageSize = val;

      this.getData();
    },
    //选取页数
    handleSizeChange(page) {
      this.pageData.page = page;

      this.getData();
    },
    //选取
    handleSelectionChange(val) {
      this.multipleSelection = val;
    }
  }
};
</script>
<style scoped>
.top {
  position: relative;
}

.add {
  position: absolute;
  right: 0;
  top: 4px;
}

.pagination {
  text-align: right;
  padding: 10px;
}
</style>
